<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>世界纪元</title>
    <!-- 初始化页面样式 -->
    <link rel="stylesheet" href="../../css/init.css" />
    <link rel="stylesheet" href="../../css/02.css" />
      <script src="../../js/rem.js"></script>
  </head>
  <body>
    <div class="main-02 bj-option">
        <!--喇叭-->
        <img src="../../img/02/btn-mute.png" class="mute-icon" alt="">
        <div class="top">
            <div class="left">
                <img src="../../img/02/logo.png" class="logo-image" alt="">
                <div class="text">
                    <div class="text-01">世界纪元</div>
                    <div class="text-02">跨时代多文明探索策略手游</div>
                </div>
            </div>
        </div>
        <div class="title">
            <div class="text">和他们一起拨开时代的迷雾</div>
            <div class="describe">已有 <span>720,000</span> 位领主接力，推动时代进步赢取丰厚奖励</div>
        </div>
        <!--左侧菜单-->
        <div class="left-menu">
            <img src="../../img/02/menu-left-bar.png" class="menu-left-bar-img" alt="">
            <ul>
                <li>
                    <img class="menu-col-bg" src="../../img/menu/menu-col-bg.png" >
                    <span class="menu-text">首页</span>

                </li>
                <li>
                    <img class="menu-col-bg" src="../../img/menu/menu-col-bg-active.png" >
                    <span class="menu-text">预约里程碑</span>

                </li>
                <li>
                    <img class="menu-col-bg" src="../../img/menu/menu-col-bg.png" >
                    <span class="menu-text">邀请任务</span>

                </li>
                <li>
                    <img class="menu-col-bg" src="../../img/menu/menu-col-bg.png" >
                    <span class="menu-text">时代文明</span>

                </li>
                <li>
                    <img class="menu-col-bg" src="../../img/menu/menu-col-bg.png" >
                    <span class="menu-text">游戏特色</span>

                </li>
                <li>
                    <img class="menu-col-bg" src="../../img/menu/menu-col-bg.png" >
                    <span class="menu-text">新闻资讯</span>

                </li>
            </ul>
        </div>
        <div class="figure"></div>
        <!--进度条-->
        <div class="line">
            <div class="is-finish-bar">
                <!--远古已完成-->
                <div class="is-finish-bar-child">
                    <div class="text-list-dialog-actived price-dialog-common">
                        <div class="dialog-title">远古时代</div>
                        <div class="dialog-line"></div>
                        <div class="dialog-tips-title">已解锁时代奖励</div>
                        <!--奖励-->
                        <div class="price-row">
                            <div>
                                <img class="price-icon" src="../../img/02/coin.jpg" alt="">
                                <div>
                                    金币×10000
                                </div>
                            </div>
                            <div class="price-wuqi-col">
                                <img class="price-icon" src="../../img/02/wuqi.jpg" alt="">
                                <div>
                                    武器×1
                                </div>
                            </div>
                        </div>
                    </div>
                    <img src="../../img/02/finish-yuangu.png" class="finish-common-block" alt="">
                    <img class="number-image" src="../../img/02/fifty.png" alt="">
                    <div class="is-finish-words">已完成</div>
                </div>
                <!--青铜未完成-->
                <div class="is-finish-bar-child">
                    <div class="text-list-dialog price-dialog-common">
                        <div class="dialog-title">青铜时代</div>
                        <div class="dialog-line"></div>
                        <div class="dialog-tips-title">已解锁时代奖励</div>
                        <div class="price-row">
                            <div>
                                <img class="price-icon" src="../../img/02/coin.jpg" alt="">
                                <div>
                                    金币×10000
                                </div>
                            </div>
                            <div class="price-wuqi-col">
                                <img class="price-icon" src="../../img/02/wuqi.jpg" alt="">
                                <div>
                                    武器×1
                                </div>
                            </div>
                        </div>
                    </div>
                    <img src="../../img/02/unfinish-qingtong.png" class="finish-common-block" alt="">
                    <img class="number-image" src="../../img/02/150.png" alt="">
                </div>

                <!--铁骑未完成-->
                <div class="is-finish-bar-child">
                    <div class="text-list-dialog price-dialog-common">
                        <div class="dialog-title">铁骑时代</div>
                        <div class="dialog-line"></div>
                        <div class="dialog-tips-title">已解锁时代奖励</div>
                        <div class="price-row">
                            <div>
                                <img class="price-icon" src="../../img/02/coin.jpg" alt="">
                                <div>
                                    金币×10000
                                </div>
                            </div>
                            <div class="price-wuqi-col">
                                <img class="price-icon" src="../../img/02/wuqi.jpg" alt="">
                                <div>
                                    武器×1
                                </div>
                            </div>
                        </div>
                    </div>
                    <img src="../../img/02/unfinish-tieqi.png" class="finish-common-block" alt="">
                    <img class="number-image" src="../../img/02/300.png" alt="">
                </div>

                <!--火气未完成-->
                <div class="is-finish-bar-child">
                    <div class="text-list-dialog price-dialog-common">
                        <div class="dialog-title">火气时代</div>
                        <div class="dialog-line"></div>
                        <div class="dialog-tips-title">已解锁时代奖励</div>
                        <div class="price-row">
                            <div>
                                <img class="price-icon" src="../../img/02/coin.jpg" alt="">
                                <div>
                                    金币×10000
                                </div>
                            </div>
                            <div class="price-wuqi-col">
                                <img class="price-icon" src="../../img/02/wuqi.jpg" alt="">
                                <div>
                                    武器×1
                                </div>
                            </div>
                        </div>
                    </div>
                    <img src="../../img/02/unfinish-huoqi.png" class="finish-common-block" alt="">
                    <img class="number-image" src="../../img/02/500.png" alt="">
                </div>

                <!--工业未完成-->
                <div class="is-finish-bar-child">
                    <div class="text-list-dialog price-dialog-common">
                        <div class="dialog-title">工业</div>
                        <div class="dialog-line"></div>
                        <div class="dialog-tips-title">已解锁时代奖励</div>
                        <div class="price-row">
                            <div>
                                <img class="price-icon" src="../../img/02/coin.jpg" alt="">
                                <div>
                                    金币×10000
                                </div>
                            </div>
                            <div class="price-wuqi-col">
                                <img class="price-icon" src="../../img/02/wuqi.jpg" alt="">
                                <div>
                                    武器×1
                                </div>
                            </div>
                        </div>
                    </div>
                    <img src="../../img/02/unfinish-gongye.png" class="finish-common-block" alt="">
                    <img class="number-image" src="../../img/02/800.png" alt="">
                </div>

                <!--现代未完成-->
                <div class="is-finish-bar-child">
                    <div class="text-list-dialog price-dialog-common">
                        <div class="dialog-title">现代</div>
                        <div class="dialog-line"></div>
                        <div class="dialog-tips-title">已解锁时代奖励</div>
                        <div class="price-row">
                            <div>
                                <img class="price-icon" src="../../img/02/coin.jpg" alt="">
                                <div>
                                    金币×10000
                                </div>
                            </div>
                            <div class="price-wuqi-col">
                                <img class="price-icon" src="../../img/02/wuqi.jpg" alt="">
                                <div>
                                    武器×1
                                </div>
                            </div>
                        </div>
                    </div>
                    <img src="../../img/02/unfinish-xiandai.png" class="finish-common-block" alt="">
                    <img class="number-image-1000" src="../../img/02/1000.png" alt="">
                </div>
            </div>
            <div class="slider-bar-col">
                <img src="../../img/02/slider.png" class="slider-bar" alt="">
                <div class="slider-words-col">
                    <div class="is-book-words">79万</div>
                    <div class="is-finish-words">已预约</div>
                </div>
            </div>
<!--            <div class="finish-bar"></div>-->
            <img src="../../img/02/finish-bar.png" class="finish-bar" alt="">
        </div>
        <div class="bottom"></div>
    </div>
  </body>
</html>
